<template>
  <div class="server-main">
    <el-form :inline="true" v-model="searchForm" class="search-form">
      <el-form-item label="目标：" class="form-input m-t-16">
        <el-input
          placeholder="请输入目标名称"
          v-model.trim="searchForm.targetName"
          clearable
          @clear="search"
        ></el-input>
      </el-form-item>
      <el-form-item label="识别码：" class="form-input m-t-16">
        <el-input
          placeholder="请输入识别码"
          v-model.trim="searchForm.targetNumber"
          clearable
          @clear="search"
        ></el-input>
      </el-form-item>
      <el-form-item label="时间范围：" class="form-input m-t-16">
        <el-date-picker
          size="small"
          v-model="searchForm.dataRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="search"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item label="图谱类型：" class="form-input m-t-16">
        <el-select
          v-model="curProject"
          placeholder="请选择图谱类型"
          @change="changeProject"
          class="form-input"
        >
          <el-option
            v-for="item in projectOptions"
            :key="item.projectId"
            :label="item.projectName"
            :value="item.projectId"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item class="m-t-16">
        <el-button type="primary" size="small" @click="search()"
          >查询</el-button
        >
        <el-button type="primary" size="small" @click="reset()">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="server-table">
      <div class="table-title">
        <span class="table-title-text">位置数据表</span>
        <div>
          <el-button type="text" size="small" @click="downImportModel"
            >下载导入模板</el-button
          >
          <el-button type="primary" size="small" @click="batchImport"
            >批量导入</el-button
          >
          <el-button type="primary" size="small" @click="add">新建</el-button>
        </div>
      </div>
      <el-table
        border
        v-loading="loading"
        :data="tableList"
        :cell-style="{ color: '#333333' }"
        :header-cell-style="{ background: '#F3F4F7', color: '#000000' }"
      >
        <el-table-column
          type="index"
          label="ID"
          width="50"
          align="center"
          fixed="left"
        ></el-table-column>
        <el-table-column
          prop="targetName"
          label="目标名称"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="targetNumber"
          label="识别码"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="targetType"
          label="目标类型"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="longitude"
          label="经度"
          align="center"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="latitude"
          label="纬度"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="areaInfo"
          label="地区信息"
          width="200"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="modifyTime"
          label="更新时间"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" width="300">
          <template slot-scope="scope">
            <el-link
              :underline="false"
              type="primary"
              class="operation_btn"
              @click.native.prevent="edit(scope.row)"
              >编辑</el-link
            >
            <el-link
              :underline="false"
              type="primary"
              class="operation_btn"
              @click.native.prevent="erasure(scope.row)"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        small
        layout="total, prev, pager, next, sizes, jumper"
        :page-sizes="[10, 20, 30]"
        :total="total"
        :hide-on-single-page="!total"
        :page-size.sync="searchForm.pageSize"
        :pager-count="7"
        :current-page="searchForm.pageNum"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
    <AddDialog @operateCompleted="operateCompleted" ref="addDialogRef" />
    <BatchImportDialog
      type="位置信息"
      @importCompleted="search"
      ref="batchImportDialogRef"
    />
  </div>
</template>
<script>
import AddDialog from "./base/addDialog.vue";
import BatchImportDialog from "../components/batchImportDialog.vue";
export default {
  name: "LocationInfo",
  components: {
    AddDialog,
    BatchImportDialog,
  },
  data: () => {
    return {
      searchForm: {
        targetNumber: null,
        targetName: null,
        dataRange: null,
        pageNum: 1,
        pageSize: 10,
      },

      tableList: [],
      total: 3,
      loading: false,

      projectOptions: [],
      curProject: "",
    };
  },
  created() {
    this.getProjectOptions();
  },
  methods: {
    getTableList() {
      this.loading = true;
      this.$axios
        .post(this.$api.situationInfo.getTargetInfoPage, {
          projectId: this.curProject,
          currentPage: this.searchForm.pageNum,
          pageSize: this.searchForm.pageSize,
          targetNumber: this.searchForm.targetNumber,
          targetName: this.searchForm.targetName,
          modifyStartTime:
            this.searchForm.dataRange && this.searchForm.dataRange[0],
          modifyEndTime:
            this.searchForm.dataRange && this.searchForm.dataRange[1],
        })
        .then((res) => {
          console.log("@目标分页信息", res);
          this.tableList = res.data.data.list;
          this.searchForm.pageNum = res.data.data.page;
          this.searchForm.pageSize = res.data.data.pageSize;
          this.total = res.data.data.total;
          this.loading = false;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    search() {
      this.searchForm.pageNum = 1;
      this.getTableList();
    },
    reset() {
      this.searchForm = {
        targetNumber: null,
        targetName: null,
        dataRange: null,
        pageNum: 1,
        pageSize: 10,
      };
      this.getTableList();
    },

    downImportModel() {
      this.$axios({
        methods: "get",
        url: this.$api.situationInfo.downloadTargetInfo,
        responseType: "blob",
      })
        .then((res) => {
          console.log("@下载", res);
          if (res.status === 200) {
            const blob = new Blob([res.data], {
              type: res.headers["content-type"].split(";")[0],
            });
            let downloadUrl = URL.createObjectURL(blob);
            let a = document.createElement("a");
            a.href = downloadUrl;
            document.body.appendChild(a);
            a.click();
            window.setTimeout(function () {
              URL.revokeObjectURL(blob);
              document.body.removeChild(a);
            }, 0);
          } else {
            this.$message.success(res.statusText);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },

    batchImport() {
      console.log("批量导入");
      this.$refs.batchImportDialogRef.dialogFormVisible = true;
    },

    add() {
      console.log("新建");
      this.$refs.addDialogRef.open("add");
    },
    edit(row) {
      console.log("修改", row);
      this.$refs.addDialogRef.open("edit", row.targetId);
    },
    operateCompleted() {
      this.searchForm.pageNum = 1;
      this.getTableList();
    },
    erasure(row) {
      this.$confirm("此操作将永久删除该条记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .post(this.$api.situationInfo.batchDelTargetInfo, {
              idList: [row.targetId],
            })
            .then((res) => {
              console.log("@删除", res);
              if (res.data.code === 200) {
                this.$message.success(res.data.message);
                this.searchForm.pageNum = 1;
                this.getTableList();
              } else {
                this.$message.success(res.data.message);
              }
            })
            .catch((err) => {
              this.$message.error(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    handleCurrentChange(page) {
      this.searchForm.pageNum = page;
      this.getTableList();
    },
    handleSizeChange(size) {
      this.searchForm.pageSize = size;
      this.getTableList();
    },

    getProjectOptions() {
      let params = {
        graphName: "",
        graphStatus: "0",
        pageNum: "",
        pageSize: "",
      };
      this.$axios
        .post(this.$api.knowledgeMap.getMapList, params)
        .then((res) => {
          const { data, code } = res.data;
          if (code === 200) {
            this.projectOptions = data.list;
            this.curProject = this.projectOptions[0].projectId;
            this.getTableList();
          }
        });
    },

    changeProject(projectId) {
      // console.log("projectId", projectId);
      this.getTableList();
    },
  },
};
</script>
<style lang="scss" scoped>
.server-main {
  position: relative;

  .search-form {
    padding: 16px 32px;
    border-radius: 4px;
    background: #ffffff;

    .el-form-item {
      margin-bottom: 0;
    }

    .form-input {
      margin-right: 32px;

      /deep/ .el-input__inner {
        width: 240px;
        height: 32px;
        background: #ffffff;
        border-radius: 2px;
        border: 1px solid #e0e0e0;
      }
    }
  }

  .el-select {
    /deep/ .el-input__inner {
      width: 240px;
      height: 32px;
      background: #ffffff;
      border-radius: 2px;
      border: 1px solid #e0e0e0;
    }
  }

  .server-table {
    margin-top: 16px;
    padding: 16px 32px 64px;
    border-radius: 4px;
    background: #ffffff;

    .table-title {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .table-title-text {
        border-left: 5px solid $--color-primary;
        padding-left: 10px;
        margin: 8px 0;
        font-size: 16px;
        line-height: 16px;
      }

      margin-bottom: 10px;
    }

    .little-circle-blue {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 3px;
      background: #55c898;
      position: relative;
      right: 4px;
      top: -2px;
    }

    .little-circle-red {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 3px;
      background: #ee5564;
      position: relative;
      right: 6px;
      top: -2px;
    }

    .page-wrapper {
      margin-top: 28px;
      display: flex;
      justify-content: flex-end;
      color: rgba(0, 0, 0, 0.65);

      .data-counter {
        font-weight: 400;
        line-height: 32px;
        margin-right: 24px;
      }

      /deep/ .btn-prev,
      /deep/ .btn-next {
        margin: 0 4px;
        min-width: 28px;
        border-radius: 2px;
        border: 1px solid rgba(0, 0, 0, 0.15);
        padding: 0;
      }

      /deep/ .el-pager .number {
        min-width: 28px;
        height: 28px;
        border-radius: 2px;
        border: 1px solid rgba(0, 0, 0, 0.15);
        margin: 0 4px;
        cursor: pointer;
      }
    }
  }

  .operation_btn {
    padding: 0 10px;

    // & + .operation_btnt {
    //   border-left: 1px solid #dddddd;
    // }
  }

  /deep/ .el-table__append-wrapper {
    padding: 10px;
  }

  .el-pagination {
    float: right;
    margin-top: 20px;

    .form-input /deep/ .el-input {
      width: 200px;
    }

    /deep/ .el-input__inner {
      height: 22px;
    }
  }
}
.m-t-16 {
  margin-top: 16px;
}
</style>
